<template>
    <el-dialog
        v-model="centerDialogVisible"
        title="添加商品类型"
        width="35%"
        center
        @close="closeDialog(false)"
    >
        <el-form ref="validateForm" :model="goodsTypeForm" :rules="rules" label-width="120px">
            <el-form-item label="类型名称" prop="name" style="width:345px">
                <el-input v-model="goodsTypeForm.name"></el-input>
            </el-form-item>
            <el-form-item label="所属类型" prop="typeName">
                <el-select v-model="goodsTypeForm.typeName" placeholder="请选择商品类型">
                    <el-option value="1" label="无"></el-option>
                    <el-option
                        v-for="item in typeList"
                        :label="item"
                        :key="item.length"
                        :value="item"
                    ></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button
                    @click="() => {
                        closeDialog(false);
                    }"
                >取消</el-button>
                <el-button type="primary" @click="submitAdd">添加</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import { reactive, toRefs, ref, onMounted } from 'vue';
// npm install @vueup/vue-quill@beta --save
// import { QuillEditor } from '@vueup/vue-quill';
import "@vueup/vue-quill/dist/vue-quill.snow.css";
import { Plus } from '@element-plus/icons';
import axios from 'axios';
import { ElMessage } from "element-plus";

// 添加商品类型
function useSubmitAdd(state, validateForm, emit) {
    const submitAdd = () => {
        validateForm.value.validate((valid) => {
            if (valid) {
                const params = {
                    name: state.goodsTypeForm.name,
                    parentName: state.goodsTypeForm.typeName,
                };
                // 执行提交操作
                axios({
                    url: '/goodstypeadd',
                    method: 'get',
                    params: params,
                }).then(res => {
                    validateForm.value.resetFields(); //重置表单
                    emit('onCloseDialog', false, res.data.data);
                });
            }
        })
    }
    return {
        submitAdd,
    }
}


export default {
    components: {
        Plus,
    },
    props: {
        centerDialogVisible: Boolean,
    },
    emits: ["onCloseDialog"],    // 声明，保存传递过来的事件
    setup(props, { emit }) {
        const validateForm = ref();
        const state = reactive({
            centerDialogVisible: props.centerDialogVisible,
            uploadURL: import.meta.env.VITE_APP_URL + "/goodsFileUpload",
            imageUrl: "",
            goodsTypeForm: {
                name: "",
                price: 0,
                picture: "",
                intro: "",
                typeName: [],
                pubdate: "",
            },

        });

        const closeDialog = (visible) => {
            state.imageUrl = "";
            emit('onCloseDialog', visible);
        };
        const rules = {
            name: [{
                required: true,
                message: '请输入商品类型名称',
                trigger: 'blur',
            }],
            typeName: [{
                required: true,
                message: '请选择商品类型',
                trigger: 'blur',
            }],


        }
        return {
            ...toRefs(state),
            closeDialog,
            rules,
            ...useSubmitAdd(state, validateForm, emit),
            validateForm,
        }
    },
    data() {
        let typeList = [];
        axios({
            url: '/goodstypejson',
            method: 'get',
        }).then(res => {
            // console.log(res.data.data)
            // res.data.data.forEach(element => {
            // state.goodsTypeForm.typeName.push(element.name)
            var u = res.data.data;
            var i = 0;
            // typeList.push('无')
            // typeList.push(typeDefault);
            for (i; i < u.length; i++) {
                // state.goodsTypeForm.typeName.push(u[i].name)
                typeList.push(u[i].name)
            }
            // });
        });
        return {
            typeList: typeList,
        }
    },
}
</script>

<style>
/* 上传组件 */
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 80px;
    height: 80px;
    text-align: center;
}
/* .avatar-uploader-icon svg {
    margin-top: 74px; 
} */
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>